<template>
  <div id="detailsstandardslist" v-cloak> 
   
    <div class="demo" :style="{  height: dtheight + 'px' }">
       <div  class="demo1" :style="{  height: dtheight-60 + 'px' }">
          <el-form ref="form"  label-width="0px">           

              
              <div class="table_box" >
                      <div class="table_box_title">规格</div>
                       <div class="table_con">
                            <div class="table_con_item">
                               规格名称
                            </div>
                            <div class="table_con_item" >
                                价格
                            </div>
                             <div class="table_con_item" >
                                库存
                            </div>
                             <div class="table_con_item" >
                                规格图片
                            </div>
                      </div>
                      <div v-for="(item,index) in form.listdata" :key="index" style="border-bottom: 1px solid #E5E5E5;">
                            <div class="table_con">
                                <div class="table_con_item" >
                                    {{ item.ename }}
                                </div>
                                <div class="table_con_item" >
                                    <el-form-item style="padding-top:7px;">
                                    <el-input  v-model="item.price"  placeholder="请输入" style="width:100px;"></el-input>
                                    </el-form-item> 
                                </div>
                                <div class="table_con_item" >
                                    <el-form-item style="padding-top:7px;">
                                    <el-input v-model="item.count"   placeholder="请输入" style="width:100px;"></el-input>
                                    </el-form-item> 
                                </div>

                                 <div class="table_con_item" >
                                    <div v-if="item.cover" @click="up_img_but(index)" ><img :src="urlimg + item.cover"  class="img" style="width:40px; height:40px;" /> </div>
                                    <div v-else  @click="up_img_but(index)"><img src="@/assets/images/login_bg1.png" class="img"   style="width:40px; height:40px;"/> </div> 
                                </div>

                                  <el-form-item label="" v-show="false" >  
                                    <el-upload                                                
                                       action="uploadUrl"  
                                       :show-file-list="false"   
                                       :before-upload="beforeupload"
                                       :http-request="ImgUploadSectionFile">
                                             <el-button slot="trigger" size="small" type="primary" id="selectImg">选取文件</el-button>
                                    </el-upload>
                                 </el-form-item> 
                                       
                                
                        </div>
                      </div>
                      
                     
               </div>

          </el-form>

          <div class="box_but">
             <div class="but_next" @click="up_but()">上一步</div>
             <div class="but_next" @click="go_but()" style="margin-left:10px;">下一步</div>
          </div>

       </div>

    </div>

   </div>
</template>

<script>

export default {
   name: 'detailsstandardslist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        form:{
           listdata:[],
           standards_data:'',
        },
        upindex:''

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 220
     this.form.standards_data = this.$store.state.standards_data
     this.$forceUpdate()
     this.list_fun()
  },
  mounted (){
    
  },
  methods: {
   
   list_fun(){
        
        var arrData = []
        let data = this.$store.state.standards_data.speclist
        if(data.length===1){
            if(data[0].list.length === 0){
            arrData.push(' ')
            }else{
            for(var j = 0 ;j <data[0].list.length;j++){
                var arr = [data[0].list[j]]
                arrData.push(arr)
            }
            }
        }else{
            for(var i = data.length - 1;i>0;i--){
            //循环调用Multiply方法   匹配多个数组
                if(i  === data.length - 1){
                    arrData = this.Multiply(data[i-1].list,data[i].list)
                }else{
                    arrData = this.Multiply(data[i-1].list,arrData)
                }
            }
        }
       // console.log(arrData);

        //如果需要每一项都是对象的话，可以转一下对象
      //   var objArr=[]
      //   for(var i = 0 ;i <arrData.length;i++){
      //       objArr.push({...arrData[i]})
      //   }
      //   console.log(objArr);

       
        for(var i = 0 ;i <arrData.length;i++){
          
            var name = arrData[i].join('') 
            //console.log(name)
            
            var objArr= {
               ename:name,
               cover:'',
               count:'',
               price:'',
               name:{}
           }
            this.form.listdata.push(objArr)
           
            
            console.log(this.form.listdata)
           
        }

        
       
        

          
   },
   Multiply(arr1,arr2){
        var arr = []
            if(arr2.length===0 && arr1.length===0){
                arr.push(['',''])
            }else if(arr2.length===0){
                for(var i = 0 ;i<arr1.length;i++){
                    arr.push([arr1[i],''])
                }
            }else if(arr1.length===0 && Array.isArray(arr2[0])){
                for(var i = 0 ;i<arr2.length;i++){
                    arr.push(['',...arr2[i]])
                }
            }else if(arr1.length===0 && !Array.isArray(arr2[0])){
                for(var i = 0 ;i<arr2.length;i++){
                    arr.push(['',arr2[i]])
                }
            }else if(Array.isArray(arr2[0])){
                for(var i = 0 ;i<arr1.length;i++){
                    for(var j = 0 ;j<arr2.length;j++){
                        arr.push([arr1[i],...arr2[j]])
                    }
                }
            }else{
                for(var i = 0 ;i<arr1.length;i++){
                    for(var j = 0 ;j<arr2.length;j++){
                        arr.push([arr1[i],arr2[j]])
                    }
                }
            }
            return arr
   },
   up_img_but(index){
         this.upindex = index
         document.getElementById("selectImg").click();  
        
    },
   ImgUploadSectionFile(param){//图片上传    
     },
     beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
                 
                 this.form.listdata[this.upindex].cover =  res.result.url
           })

          return false;
    },
   up_but(){
        this.$router.go(-1)
   },
   go_but(){
         this.$store.commit('standards_details_fun', this.form.listdata)  //向vuex提交 规格详情数据 
         console.log(this.$store.state.product_data,"获取基础产品数据")
         console.log(this.$store.state.standards_data,"获取规格数据")
         console.log(this.$store.state.standards_details_data,"获取规格详情数据")
         
      //   this.$router.push({
      //     path: '/index/shop/warehouse/productdetails',
      //     query: {
      //       // name:this.user_name,
      //       // id:row.uid
      //     }
      //   })

     },


  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    position: relative;
}
.demo1{
    overflow-y:auto;
}
.box_but{
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom:10px;
}
.but_next{
   height: 35px;
   width:80px;
   border:1px solid #E5E5E5;
   display: flex;
   align-items: center;
   justify-content: center;
   color:black;
   font-size:14px;
}

.table_box{
   border: 1px solid#E5E5E5;
   margin-top:20px;
}
.table_box:first-child{
   margin-top:0px;
}
.table_box_title{
   background: #E5E5E5;
   color:black;
   height: 45px;
   line-height: 45px;
   padding-left: 20px;
   font-size:16px;
   cursor:pointer;
}
.table_con{
   display: flex;
}
.table_con_item{
   flex: 1;
   height: 50px;
   display: flex;
   align-items: center;
   padding:0px 10px;
   box-sizing: border-box;
   font-size:14px;
}
.table_box>.table_con{
   border-bottom: 1px solid #E5E5E5;
}
.table_box>.table_con:last-child{
   border-bottom:none;
}
.table_con>.table_con_item{
   border-right: 1px solid #E5E5E5;
}
.table_con>.table_con_item:last-child{
   border-right: none;
}
.tag_add_but{
   margin-left:10px;
   color:black;
   cursor:pointer;
}
</style>